---
section: Backgrounds
title: Background Position
slug: /docs/background-position/
---

# Background Position

Utilities for controlling the position of an element's background image.

<carbon-ad />

| React props                 | CSS Properties                 |
| --------------------------- | ------------------------------ |
| `backgroundPosition={side}` | `background-position: {side};` |

## Usage

Use the`backgroundPosition={side}` utilities to control the position of an element's background image.

```jsx preview color=emerald
<>
  <template preview>
    <div>
      <x.div display="flex" justifyContent="space-around" mb={8}>
        <x.div flex="1 1 0">
          <x.p
            textAlign="center"
            fontSize="sm"
            color="emerald-600"
            fontWeight="medium"
            mb={1}
          >
            left top
          </x.p>
          <x.div
            mx="auto"
            bg="emerald-300"
            borderRadius="md"
            w={24}
            h={24}
            backgroundRepeat="no-repeat"
            backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')"
            backgroundPosition="left top"
          />
        </x.div>
        <x.div flex="1 1 0">
          <x.p
            textAlign="center"
            fontSize="sm"
            color="emerald-600"
            fontWeight="medium"
            mb={1}
          >
            top
          </x.p>
          <x.div
            mx="auto"
            bg="emerald-300"
            borderRadius="md"
            w={24}
            h={24}
            backgroundRepeat="no-repeat"
            backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')"
            backgroundPosition="top"
          />
        </x.div>
        <x.div flex="1 1 0">
          <x.p
            textAlign="center"
            fontSize="sm"
            color="emerald-600"
            fontWeight="medium"
            mb={1}
          >
            right top
          </x.p>
          <x.div
            mx="auto"
            bg="emerald-300"
            borderRadius="md"
            w={24}
            h={24}
            backgroundRepeat="no-repeat"
            backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')"
            backgroundPosition="right top"
          />
        </x.div>
      </x.div>
      <x.div display="flex" justifyContent="space-around" mb={8}>
        <x.div flex="1 1 0">
          <x.p
            textAlign="center"
            fontSize="sm"
            color="emerald-600"
            fontWeight="medium"
            mb={1}
          >
            left
          </x.p>
          <x.div
            mx="auto"
            bg="emerald-300"
            borderRadius="md"
            w={24}
            h={24}
            backgroundRepeat="no-repeat"
            backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')"
            backgroundPosition="left"
          />
        </x.div>
        <x.div flex="1 1 0">
          <x.p
            textAlign="center"
            fontSize="sm"
            color="emerald-600"
            fontWeight="medium"
            mb={1}
          >
            center
          </x.p>
          <x.div
            mx="auto"
            bg="emerald-300"
            borderRadius="md"
            w={24}
            h={24}
            backgroundRepeat="no-repeat"
            backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')"
            backgroundPosition="center"
          />
        </x.div>
        <x.div flex="1 1 0">
          <x.p
            textAlign="center"
            fontSize="sm"
            color="emerald-600"
            fontWeight="medium"
            mb={1}
          >
            right
          </x.p>
          <x.div
            mx="auto"
            bg="emerald-300"
            borderRadius="md"
            w={24}
            h={24}
            backgroundRepeat="no-repeat"
            backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')"
            backgroundPosition="right"
          />
        </x.div>
      </x.div>
      <x.div display="flex" justifyContent="space-around">
        <x.div flex="1 1 0">
          <x.p
            textAlign="center"
            fontSize="sm"
            color="emerald-600"
            fontWeight="medium"
            mb={1}
          >
            left bottom
          </x.p>
          <x.div
            mx="auto"
            bg="emerald-300"
            borderRadius="md"
            w={24}
            h={24}
            backgroundRepeat="no-repeat"
            backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')"
            backgroundPosition="left bottom"
          />
        </x.div>
        <x.div flex="1 1 0">
          <x.p
            textAlign="center"
            fontSize="sm"
            color="emerald-600"
            fontWeight="medium"
            mb={1}
          >
            bottom
          </x.p>
          <x.div
            mx="auto"
            bg="emerald-300"
            borderRadius="md"
            w={24}
            h={24}
            backgroundRepeat="no-repeat"
            backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')"
            backgroundPosition="bottom"
          />
        </x.div>
        <x.div flex="1 1 0">
          <x.p
            textAlign="center"
            fontSize="sm"
            color="emerald-600"
            fontWeight="medium"
            mb={1}
          >
            right bottom
          </x.p>
          <x.div
            mx="auto"
            bg="emerald-300"
            borderRadius="md"
            w={24}
            h={24}
            backgroundRepeat="no-repeat"
            backgroundImage="url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80')"
            backgroundPosition="right bottom"
          />
        </x.div>
      </x.div>
    </div>
  </template>
  <x.div
    backgroundRepeat="no-repeat"
    backgroundPosition="left top"
    backgroundImage="url(...)"
  />
  <x.div
    backgroundRepeat="no-repeat"
    backgroundPosition="top"
    backgroundImage="url(...)"
  />
  <x.div
    backgroundRepeat="no-repeat"
    backgroundPosition="right top"
    backgroundImage="url(...)"
  />
  <x.div
    backgroundRepeat="no-repeat"
    backgroundPosition="left"
    backgroundImage="url(...)"
  />
  <x.div
    backgroundRepeat="no-repeat"
    backgroundPosition="center"
    backgroundImage="url(...)"
  />
  <x.div
    backgroundRepeat="no-repeat"
    backgroundPosition="right"
    backgroundImage="url(...)"
  />
  <x.div
    backgroundRepeat="no-repeat"
    backgroundPosition="left bottom"
    backgroundImage="url(...)"
  />
  <x.div
    backgroundRepeat="no-repeat"
    backgroundPosition="bottom"
    backgroundImage="url(...)"
  />
  <x.div
    backgroundRepeat="no-repeat"
    backgroundPosition="right bottom"
    backgroundImage="url(...)"
  />
</>
```

## Responsive

To control the position of an element's background image at a specific breakpoint, use responsive object notation. For example, adding the property `backgroundPosition={{ md: "right" }}` to an element would apply the `backgroundPosition="right"` utility at medium screen sizes and above.

```jsx
<x.div backgroundPosition={{ md: 'right' }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
